<template>
	<view class="order-management">
		<u-navbar :autoBack="false" bgColor="#fff">
			<view slot="left"><uni-icons type="left" size="16" color="#000" @click="backPage"></uni-icons></view>
			<view slot="center">
				我的订单 ({{orderList.length}})
			</view>
		</u-navbar>
		<view class="top-view">
			<u-tabs :list="tabsList" :current="defultCurrent" keyName="name" :scrollable="false" lineColor="transparent"
				:activeStyle="{
			    color: '#000000',
			    fontWeight: 'bold',
				padding:'0',
			    transform: 'scale(1.05)',
				fontSize:'28rpx'
			}" :inactiveStyle="{
			    color: '#333333',
			    transform: 'scale(1)',
				fontSize:'28rpx',
				padding:'0'
			}" @click="handleTab"></u-tabs>
		</view>

		<view v-if="orderList.length==0" class="empty">
			<u-empty :icon="imgUrl + 'empty-dingdan.png'" mode="data" text="暂无订单" />
			<view class="emptybth" @click="goPlaceAnOrder">
				去下单
			</view>
		</view>
		<scroll-view v-else class="below" scroll-y="true" lower-threshold="50" @scrolltolower="scrolltolower">
			<view class="orderItem" v-for="(item,index) in orderList" :key="index" @tap="orderClick(item)">
				<view class="storeName flex_heng">
					{{item.productTitle}}<uni-icons type="right" size="14" color="#666"></uni-icons>
				</view>
				<view class="orderMid flex_heng">
					<view class="shopImgBox flex_heng">
						<view class="shopImgItem" v-for="(items,indexs) in item.skuPicList.slice(0, 3)" :key="indexs">
							<image :src="items" mode=""></image>
						</view>
					</view>
					<view class="shopPrice flex_shu">
						<view class="itemPrice">
							<text>￥</text>{{item.totalPrice}}
						</view>
						<view class="itemNum">
							共{{item.skuNum}}件
						</view>
					</view>
				</view>
				<u-line color="#DEDEDE" margin="28rpx 0"></u-line>
				<view class="shopBtnBox flex_heng">
					<template v-if="item.status == 1">
						<view class="grayBtn" @tap.stop="cancel(item.id)">
							取消订单
						</view>
						<view class="redBtn">
							待支付
						</view>
					</template>

					<template v-if="item.status == 2">
						<view class="grayBtn" @tap.stop="cancel(item.id)">
							取消订单
						</view>
						<view class="redBtn">
							继续支付
						</view>
					</template>

					<template v-if="item.status == 4">
						<view class="grayBtn" @tap.stop="confirmOrder(item.id)">
							确认收货
						</view>
						<!-- 	<view class="redBtn">
							继续支付
						</view> -->
					</template>

					<template v-if="item.status == 3">
						<view class="grayBtn" @tap.stop="cancel(item.id)">
							取消订单
						</view>
						<!-- 	<view class="redBtn">
							继续支付
						</view> -->
					</template>


					<template v-if="item.status == 5">
						<view class="grayBtn">
							已退款
						</view>
					</template>

					<template v-if="item.status == 6">
						<view class="grayBtn">
							已取消
						</view>
					</template>
					<template v-if="item.status == 7">
						<view class="grayBtn">
							已完成
						</view>
					</template>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		getOrderListByUser,
		cancelOrder,
		confirmOrder
	} from '@/api/api.js'
	export default {
		data() {
			return {
				show: true,
				imgUrl: this.$imgUrl,
				searchKey: '',
				page: 1,
				pageSize: 10,
				defultCurrent: 0,
				tabsList: [{
						id: 0,
						name: '全部'
					},
					{
						id: 1,
						name: '待支付'
					},
					{
						id: 2,
						name: '部分支付'
					},
					{
						id: 3,
						name: '代发货'
					},
					{
						id: 4,
						name: '待收货'
					}, {
						id: 5,
						name: '已退款'
					}, {
						id: 6,
						name: '已取消'
					}, {
						id: 7,
						name: '已完成 '
					}, {
						id: 8,
						name: '待退款 '
					}, {
						id: 9,
						name: '部分退款 '
					}, {
						id: 10,
						name: '待评价 '
					},
				],
				orderList: [],
			};
		},
		onLoad(op) {
			console.log(op);
			this.defultCurrent = op.status || 0
		},
		onHide() {
			this.page = 1
			this.orderList = []
		},
		onShow() {
			this.getList()
		},

		onReachBottom() {
			console.log('到底了');
			this.page++
			this.getList()
		},
		watch: {},
		methods: {
			backPage() {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			// 请求列表数据
			getList() {
				let data = {
					pageNum: this.page,
					pageSize: 10,
					status: this.defultCurrent === 0 ? null : this.defultCurrent,
				}
				getOrderListByUser({
					params: data
				}).then(res => {
					if (res.code == 200) {
						console.log(res);
						if (res.rows.length > 0) {
							this.orderList = [...this.orderList, ...res.rows];
							console.log('this.orderList', this.orderList)
							this.orderList.forEach(item => {
								if (typeof item.skuPicList == 'string') {
									item.skuPicList = item.skuPicList.split(',');
								} else {
									item.skuPicList = []
								}
							});
						}
					}
				})
			},

			cancel(id) {
				uni.showLoading()
				cancelOrder(id).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						uni.$u.toast('订单取消成功');
						this.getList()
					}
				})
			},
			orderClick(item) {
				uni.navigateTo({
					url: `/pages/package/payOrderDetail/payOrderDetail?orderId=${item.id}`
				})
			},

			// 再次购买
			buyAgain(item) {
				//跳转再次购买 确认订单
				uni.navigateTo({
					url: `/package/pages/buyAgain/buyAgain?waterNumber=${item.waterNumber}`
				})
			},


			rebuy(item) {
				uni.navigateTo({
					url: `/package/pages/goodsDetail/goodsDetail?id=${item.shopId}`
				})
			},

			// 滚动加载
			scrolltolower() {
				console.log('到底了');
				this.page++
				this.getList()
			},

			handleTab(item) {
				this.defultCurrent = item.id;
				this.page = 1
				this.orderList = []
				this.getList()
			},

			toOrderDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: `/package/pages/orderDetail/orderDetail?waterNumber=${item.waterNumber}`
				})
			},

			goPlaceAnOrder() {
				uni.switchTab({
					url: '/pages/shoppingMall/shoppingMall'
				})
			},
			confirmOrder(id) {
				confirmOrder(id).then(res => {
					if (res.code == 200) {
						uni.$u.toast('确认收货成功');
						this.page = 1
						this.orderList = []
						this.getList()
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.order-management {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background: #f6f6f6;

		.top-view {
			width: 100%;
			height: 234rpx;
			background: #fff;
			// background: linear-gradient(180deg, #FFD1B8 0%, #FFF7F1 100%);
			display: flex;
			align-items: flex-end;

			margin-top: 40rpx;

			// ::v-deep .u-tabs {
			// 	width: 100%;
			// }
		}

		.below {
			width: 100%;
			height: calc(100vh - 240rpx);
			padding: 28rpx;
			box-sizing: border-box;

			.orderItem {
				width: 100%;
				min-height: 342rpx;
				border-radius: 16rpx;
				opacity: 1;
				background: #ffffff;
				margin-bottom: 28rpx;
				padding: 28rpx;
				box-sizing: border-box;

				.storeName {
					color: #000000;
					font-size: 28rpx;
					font-weight: 500;
					font-family: "Alibaba PuHuiTi 2.0";
					letter-spacing: 0rpx;
					justify-content: flex-start;
					margin-bottom: 28rpx;
				}

				.shopImgBox {
					width: 540rpx;
					min-height: 124rpx;
					justify-content: flex-start;
					overflow: hidden;

					.shopImgItem {
						width: 124rpx;
						height: 124rpx;
						margin-right: 16rpx;
						border-radius: 16rpx;

						image {
							width: 124rpx;
							height: 124rpx;
							border-radius: 16rpx;
						}
					}
				}

				.shopPrice {
					align-items: flex-end;

					.itemPrice {
						color: #000000;
						font-size: 36rpx;
						font-weight: 700;
						font-family: "Alibaba PuHuiTi 2.0";
						letter-spacing: 1rpx;

						text {
							font-size: 28rpx;
						}
					}

					.itemNum {
						color: #666666;
						font-size: 28rpx;
						font-weight: 400;
						font-family: "Alibaba PuHuiTi 2.0";
						letter-spacing: 0rpx;
					}
				}

				.shopBtnBox {
					justify-content: flex-end;

					.grayBtn {
						margin-left: 16rpx;
						padding: 0 28rpx;
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 8rpx;
						opacity: 1;
						border: 1rpx solid #000000;
						color: #000000;
						font-size: 24rpx;
						font-weight: 500;
						font-family: "Alibaba PuHuiTi 2.0";
						letter-spacing: 0rpx;
						text-align: center;
					}

					.redBtn {
						margin-left: 16rpx;
						padding: 0 28rpx;
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 8rpx;
						opacity: 1;
						border: 1rpx solid #FF4D4D;
						color: #FF4D4D;
						font-size: 24rpx;
						font-weight: 500;
						font-family: "Alibaba PuHuiTi 2.0";
						letter-spacing: 0rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>